<template>
  <div class="ef-container">
    <div class="flex-row" style="margin-bottom: 20px;">
      <div class="form-left flex-row">
        <label class="ewai">是否预定住房*</label>
        <el-radio v-model="unitinfo.isPredestineRoom" label="YES" style="padding-top: 8px;">是</el-radio>
        <el-radio v-model="unitinfo.isPredestineRoom" label="NO" style="padding-top: 8px;">否</el-radio>
      </div><!--
    --><div class="form-right flex-row">
        <label class="ewai">是否提前汇培训费*</label>
        <el-radio v-model="unitinfo.isPayment" label="YES" style="padding-top: 8px;">是</el-radio>
        <el-radio v-model="unitinfo.isPayment" label="NO" style="padding-top: 8px;">否</el-radio>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('companyName')}">
        <input type="text" required v-model="unitinfo.companyName" v-validate="'required|max:80'" name="companyName"/>
        <label data-content="单位名称*">单位名称*</label>
      </div><!--
    --><div class="material-textfield green form-right" :class="{'validate-err': errors.has('companyAdderss')}">
        <input type="text" required v-model="unitinfo.companyAdderss " v-validate="'required|max:80'" name="companyAdderss" />
        <label data-content="单位地址*">单位地址*</label>
      </div>
    </div>
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('invoiceNumber')}">
        <input type="text" required v-model="unitinfo.invoiceNumber" v-validate="'required|max:40'" name="invoiceNumber"/>
        <label data-content="开票税号*">开票税号*</label>
      </div><!--
    --><div class="material-textfield green form-right" :class="{'validate-err': errors.has('companyPost')}">
        <input type="text" required v-model="unitinfo.companyPost" v-validate="'required|zipCode'" name="companyPost"/>
        <label data-content="邮政编码*">邮政编码*</label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('contactsName')}">
        <input type="text" required v-model="unitinfo.contactsName" v-validate="'required||max:10'" name="contactsName"/>
        <label data-content="联系人*">联系人*</label>
      </div><!--
    --><div class="material-textfield green form-right" :class="{'validate-err': errors.has('contactsPhone')}">
        <input type="text" required v-model="unitinfo.contactsPhone"  v-validate="'required|fax'" name="contactsPhone"/>
        <label data-content="联系电话*">联系电话*</label>
      </div>
    </div>

    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('city')}">
        <el-select v-model="unitinfo.city" placeholder="" class="width-full" v-validate="'required'" name="city">
          <el-option
            v-for="item in options"
            :filterable="true"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <label data-content="所在地市*">所在地市*</label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green width-full" :class="{'validate-err': errors.has('remark')}">
        <input type="text" required v-model="unitinfo.remark" v-validate="'max:100'" name="remark"/>
        <label data-content="备注">备注</label>
      </div>
    </div>
    <!-- <div class="tc">
      <el-button type="success width-200" plain round>下一步</el-button>
    </div> -->
  </div>
</template>

<script>
  export default {
    title: '单位信息',
    name: 'unit-info',
    data () {
      return {
        unitinfo: {},
        options: [
          { value: '西安市', label: '西安市'},
          { value: '铜川市', label: '铜川市'},
          { value: '宝鸡市', label: '宝鸡市'},
          { value: '咸阳市', label: '咸阳市'},
          { value: '渭南市', label: '渭南市'},
          { value: '延安市', label: '延安市'},
          { value: '汉中市', label: '汉中市'},
          { value: '榆林市', label: '榆林市'},
          { value: '安康市', label: '安康市'},
          { value: '商洛市', label: '商洛市'},
          { value: '兴平市', label: '兴平市'},
          { value: '韩城市', label: '韩城市'},
          { value: '华阴市', label: '华阴市'},
          { value: '其他', label: '其他'}
        ]
      }
    },
    props: {
      data: {}
    },
    mounted () {
      this.unitinfo = Object.assign({}, this.data)
    },
    methods: {
      validate () {
        return this.$validator.validateAll()
      }
    },
    watch: {
      'unitinfo': {
        handler: function (val, oldVal) {
          this.$emit('update:data', this.unitinfo)
        },
        deep: true
      }
    }
  }
</script>
